<template>
    <el-drawer :close-on-click-modal="false" class="hm-drawer" size="35%" direction="rtl" v-model="show" :before-close="handleClose">
        <template #header>
            <div class="hm-box-title">添加供应商</div>
        </template>
        <el-form ref="supplierFormRef" :model="formSupplier" style="width: 100%" label-width="135px"
            :rules="rulesSupplier" :inline="true">

            <el-form-item label="供应商名称" prop="supplierName">
                <el-input v-model="formSupplier.supplierName" placeholder="请输入供应商名称" style="width: 300px" />
            </el-form-item>
            <!-- <el-form-item label="供应商编码" prop="userId">
                <el-input v-model="formSupplier.userId" placeholder="请输入供应商编码" style="width: 300px" />
            </el-form-item> -->
            <el-form-item label="供应商类型" prop="supplierType">
                <el-select v-model="formSupplier.supplierType" placeholder="请选择供应商类型" clearable style="width: 300px">
                    <el-option v-for="dict in hm_supplier_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="供应商评级" prop="supplierGrade">
                <el-input v-model="formSupplier.supplierGrade" placeholder="请输入供应商评级" style="width: 300px" />
            </el-form-item>
            <el-form-item label="招商部" prop="recruiterDept">
                <el-select v-model="formSupplier.recruiterDept" placeholder="请选择招商部" clearable @change="deptChange"
                    style="width: 300px">
                    <el-option v-for="dict in deptList" :key="dict.deptId" :label="dict.deptName"
                        :value="dict.deptId" />
                </el-select>
            </el-form-item>
            <el-form-item label="招商员" prop="recruiter">
                <el-select v-model="formSupplier.recruiter" placeholder="请选择招商员" clearable style="width: 300px">
                    <el-option v-for="dict in recruiterList" :key="dict.userId" :label="dict.nickName"
                        :value="dict.userId" />
                </el-select>
            </el-form-item>
            <el-form-item label="登录账号" prop="userName">
                <el-input v-model="formSupplier.userName" placeholder="请输入登录账号" style="width: 300px" />
            </el-form-item>
            <el-form-item prop="password" label="登录密码">
                <el-input v-model="formSupplier.password" type="password" auto-complete="off" style="width: 300px"
                    placeholder="密码">
                </el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword" label="密码确认">
                <el-input v-model="formSupplier.confirmPassword" type="password" auto-complete="off"
                    style="width: 300px" placeholder="确认密码">
                </el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div style="flex: auto">
                <el-button :loading="buttonLoading" type="primary" @click="confirmClick">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup name="supplierAdd" lang="ts">
import { getDeptList, getUserById } from '@/api/group/qualityControl'
import { SupplierTable } from '@/api/group/supplier/types'
import { hmSupplierAdd } from '@/api/group/supplier/index'
import { validateSpaceAndEmoji } from '@/utils/validate'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { hm_supplier_type } = toRefs<any>(proxy?.useDict('hm_supplier_type'));
const supplierFormRef = ref<ElFormInstance>();
const deptList = ref<{ deptId: string; deptName: string; }[]>([])
const recruiterList = ref<{ userId: string; nickName: string; }[]>([])
const buttonLoading = ref(false);
const equalToPassword = (rule: any, value: string, callback: any) => {
    if (formSupplier.password !== value) {
        callback(new Error("两次输入的密码不一致"));
    } else {
        callback();
    }
};
const rulesSupplier = reactive({
    supplierName: [
        { required: true, trigger: "blur", message: "请输入供应商名称" },{ validator: validateSpaceAndEmoji, }
    ],
    supplierCode: [
        { required: true, trigger: "blur", message: "请输入供应商编码" },{ validator: validateSpaceAndEmoji, }
    ],
    supplierType: [
        { required: true, trigger: "change", message: "请选择供应商类型" }
    ],
    supplierGrade: [
        { required: true, trigger: "change", message: "请选择供应商评级" },{ validator: validateSpaceAndEmoji, }
    ],
    recruiterDept: [
        { required: true, trigger: "change", message: "请选择招商部" }
    ],
    recruiter: [
        { required: true, trigger: "change", message: "请选择招商员" }
    ],
    userName: [
        { required: true, trigger: "blur", message: "请输入您的账号" },
        { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" },
        { validator: validateSpaceAndEmoji, }
    ],
    password: [
        { required: true, trigger: "blur", message: "请输入您的密码" },
        { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" },
        { validator: validateSpaceAndEmoji, }
    ],
    confirmPassword: [
        { required: true, trigger: "blur", message: "请再次输入您的密码" },
        { required: true, validator: equalToPassword, trigger: "blur" }
    ],
})
const formSupplier = reactive<SupplierTable>({
    supplierName: undefined,
    userId: undefined,
    supplierType: undefined,
    supplierGrade: undefined,
    recruiterDept: undefined,
    recruiter: undefined,
    userName: undefined,
    password: undefined,
    confirmPassword: undefined,
});

const props = defineProps({
    supplierVisible: {
        type: Boolean,
        default: false
    }
});
const show = computed(() => props.supplierVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    supplierFormRef.value?.resetFields();
    emits('doClose')
}
/** 获取招商部门信息*/
const getDeptLists = async () => {
    const res = await getDeptList({ parentId: '1782395704411734018' })
    deptList.value = res.data
}
/** 根据招商部获取招商员*/
const deptChange = async (event: string) => {
    if (event) {
        const res = await getUserById(event)
        recruiterList.value = res.data
        formSupplier.recruiter = undefined
    } else {
        recruiterList.value = []
        formSupplier.recruiter = undefined
    }
}
/** 确定 */
const confirmClick = () => {
    supplierFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            await hmSupplierAdd(formSupplier).finally(() => buttonLoading.value = false);
            proxy?.$modal.msgSuccess("新增成功");
            handleClose();
        }
    })
}
/** 取消 */
const cancel = () => {
    handleClose()
}
onMounted(() => {
    getDeptLists();
});
</script>